<div class="field-wrapper">
    <div class="content">
        <div class="header">
            <span>公司通讯录</span>
            <div class="spacer"></div>
            <div *ngIf="searchPlaceholder">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input [(ngModel)]="searchData" type="text" nz-input [placeholder]="searchPlaceholder"
                        (ngModelChange)="search()" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i class="iconfont icon-search-2-line"></i>
                </ng-template>
            </div>
        </div>

        <div class="body">
            <nz-list>
                <nz-list-item *ngFor="let item of data">
                    <div class="list-item">
                        <div *ngFor="let columnDefine of columnDefineList"
                            [ngClass]="{'photo-img': columnDefine.isImage}">
                            <span *ngIf="!columnDefine.isImage && !columnDefine.isTime">
                                <ng-container *ngIf="columnDefine.bindField == 'departmentNode'">
                                    {{$any(item)?.departmentNode?.nodeName}}
                                </ng-container>

                                <ng-container *ngIf="columnDefine.bindField == 'gender'">
                                    {{getGenderDisplay(item[columnDefine.bindField])}}
                                </ng-container>

                                <ng-container
                                    *ngIf="columnDefine.bindField != 'departmentNode' && columnDefine.bindField != 'gender'">
                                    {{item[columnDefine.bindField]}}
                                </ng-container>
                            </span>

                            <span *ngIf="columnDefine.isTime">
                                {{item[columnDefine.bindField] | date: 'yyyy-MM-dd HH:mm'}}
                            </span>
                            <ng-container *ngIf="columnDefine.isImage">
                                <img *ngIf="item[columnDefine.bindField]" [src]="item[columnDefine.bindField]" alt="">
                                <i *ngIf="!item[columnDefine.bindField]" class="no-img"></i>
                            </ng-container>
                        </div>

                    </div>
                </nz-list-item>
            </nz-list>
        </div>
    </div>
</div>